﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星星跟流星背景</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        body {
            background: linear-gradient(to bottom, #131313 0%, #02101c 100%);
        }

        .canvas-box {
            position: fixed;
            left: 0;
            top: 0;
            z-index: -1;
        }

        a:link, a:hover, a:visited, a:active {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        a {
            margin: 30px 0;
            font-size: 20px;
        }
    </style>

</head>
<body>

<div class="canvas-box">
    <canvas id="canvas">ur fucking brower support no canvas</canvas>
</div>

<script>
    let WINDOW_WIDTH = document.body.offsetWidth;
    let WINDOW_HEIGHT = document.body.offsetHeight;
    let canvas, context;
    let num = 500;
    let stars = [];
    let mouseX = WINDOW_WIDTH / 2;
    let mouseY = WINDOW_HEIGHT / 2;
    let rnd;

    window.onload = function () {
        canvas = document.getElementById('canvas');
        canvas.width = WINDOW_WIDTH;
        canvas.height = WINDOW_HEIGHT;

        context = canvas.getContext('2d');

        addStar();
        setInterval(render, 33);
        liuxing();

        // render();
        document.body.addEventListener('mousemove', mouseMove);
    };

    function liuxing() {
        let time = Math.round(Math.random() * 3000 + 33);
        setTimeout(function () {
            rnd = Math.ceil(Math.random() * stars.length);
            liuxing();
        }, time)
    }

    function mouseMove(e) {
        //因为是整屏背景，这里不做坐标转换
        mouseX = e.clientX;
        mouseY = e.clientY;
    }

    function render() {
        context.fillStyle = 'rgba(0,0,0,0.1)';
        context.fillRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
        // context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
        for (let i = 0; i < num; i++) {
            let star = stars[i];
            if (i === rnd) {
                star.vx = -5;
                star.vy = 20;
                context.beginPath();
                context.strokeStyle = 'rgba(255,255,255,' + star.alpha + ')';
                context.lineWidth = star.r;
                context.moveTo(star.x, star.y);
                context.lineTo(star.x + star.vx, star.y + star.vy);
                context.stroke();
                context.closePath();
            }
            star.alpha += star.ra;
            if (star.alpha <= 0) {
                star.alpha = 0;
                star.ra = -star.ra;
                star.vx = Math.random() * 0.2 - 0.1;
                star.vy = Math.random() * 0.2 - 0.1;
            } else if (star.alpha > 1) {
                star.alpha = 1;
                star.ra = -star.ra
            }
            star.x += star.vx;
            if (star.x >= WINDOW_WIDTH) {
                star.x = 0;
            } else if (star.x < 0) {
                star.x = WINDOW_WIDTH;
                star.vx = Math.random() * 0.2 - 0.1;
                star.vy = Math.random() * 0.2 - 0.1;
            }
            star.y += star.vy;
            if (star.y >= WINDOW_HEIGHT) {
                star.y = 0;
                star.vy = Math.random() * 0.2 - 0.1;
                star.vx = Math.random() * 0.2 - 0.1;
            } else if (star.y < 0) {
                star.y = WINDOW_HEIGHT;
            }
            context.beginPath();
            let bg = context.createRadialGradient(star.x, star.y, 0, star.x, star.y, star.r);
            bg.addColorStop(0, `rgba(255,255,255,${star.alpha})`);
            bg.addColorStop(1, 'rgba(255,255,255,0)');
            context.fillStyle = bg;
            context.arc(star.x, star.y, star.r, 0, Math.PI * 2, true);
            context.fill();
            context.closePath();
        }
    }

    function addStar() {
        for (let i = 0; i < num; i++) {
            let aStar = {
                x: Math.round(Math.random() * WINDOW_WIDTH),
                y: Math.round(Math.random() * WINDOW_HEIGHT),
                r: Math.random() * 3,
                ra: Math.random() * 0.05,
                alpha: Math.random(),
                vx: Math.random() * 0.2 - 0.1,
                vy: Math.random() * 0.2 - 0.1
            };
            stars.push(aStar);
        }
    }
</script>

</body>
</html>
